<script setup lang="ts">
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
import type { Data } from '@arco-design/web-vue/es/_utils/types'

import {
  addSwitcherApi,
  getSwitcherSwNumApi,
  updateSwitcherApi,
} from '@/apis/modules/switch'
import { Message } from '@arco-design/web-vue'

interface IEmit {
  (e: 'update:visible', visible: boolean): void
  (e: 'refresh'): void
}

interface IProps {
  visible: boolean
  record?: Data
}

const props = defineProps<IProps>()
const emit = defineEmits<IEmit>()
const { allRegionOptions } = useRegions()

const formRef = ref<FormInstance>()
const formData = reactive({
  id: '',
  name: '',
  sw_num: '',
  url: '',
  region_id: '',
  user: '',
  password: '',
})
const formRules: Record<string, FieldRule[]> = {
  name: [{ required: true, message: '请输入名称' }],
  sw_num: [{ required: true, message: '请选择交换机型号' }],
  url: [{ required: true, message: '请输入交换机URL' }],
  region_id: [{ required: true, message: '请选择所属区域' }],
  user: [{ required: true, message: '请输入用户名' }],
  password: [{ required: true, message: '请输入密码' }],
}

const switchTypes = ref<LabelValue[]>([])
onMounted(async () => {
  const res = await getSwitcherSwNumApi()
  switchTypes.value = res.sw_num!.map(item => ({ label: item, value: item }))
})

// 表单提交
async function handleSubmit() {
  const res = await formRef.value?.validate()
  if (res) {
    return false
  }
  if (props.record) {
    await updateSwitcherApi(formData as any)
  } else {
    await addSwitcherApi(formData as any)
  }
  Message.success(props.record ? '更新成功' : '创建成功')
  emit('refresh')
}

watchPostEffect(() => {
  if (!props.visible) {
    formRef.value?.resetFields()
    return
  }
  if (props.record) {
    formData.id = props.record.id!
    formData.name = props.record.name!
    formData.sw_num = props.record.sw_num!
    formData.url = props.record.url!
    formData.region_id = props.record.region_id!
    formData.user = props.record.user!
    formData.password = props.record.password!
  }
})
</script>

<template>
  <resource-dialog
    :title="props.record ? '编辑交换机' : '新建交换机'"
    :visible="visible"
    :width="480"
    :before-ok="handleSubmit"
    :mask-closable="false"
    ok-text="确定"
    @update:visible="e => emit('update:visible', e)"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical"
    >
      <a-form-item
        label="名称"
        field="name"
        required
        hide-asterisk
        asterisk-position="end"
      >
        <a-input
          v-model="formData.name"
          placeholder="请输入名称"
          show-word-limit
          :max-length="40"
        />
      </a-form-item>
      <a-form-item
        label="所属区域"
        field="region_id"
        required
        hide-asterisk
        asterisk-position="end"
      >
        <a-select
          v-model="formData.region_id"
          :options="allRegionOptions"
          :disabled="!!props.record"
          placeholder="请选择所属区域"
        />
      </a-form-item>

      <a-form-item
        label="交换机型号"
        field="sw_num"
        required
        hide-asterisk
        asterisk-position="end"
      >
        <a-select
          v-model="formData.sw_num"
          placeholder="请选择交换机型号"
          :options="switchTypes"
        />
      </a-form-item>
      <a-form-item
        label="交换机URL"
        field="url"
        required
        hide-asterisk
        asterisk-position="end"
      >
        <a-input
          v-model="formData.url"
          placeholder="请输入交换机URL"
          show-word-limit
          :max-length="256"
        />
      </a-form-item>
      <a-form-item
        label="用户名"
        field="user"
        required
        hide-asterisk
        asterisk-position="end"
      >
        <a-input
          v-model="formData.user"
          placeholder="请输入用户名"
          show-word-limit
          :max-length="30"
          :input-attrs="{
            autocomplete: 'off',
          }"
        />
      </a-form-item>
      <a-form-item
        label="密码"
        field="password"
        required
        hide-asterisk
        asterisk-position="end"
      >
        <a-input-password
          v-model="formData.password"
          placeholder="请输入密码"
          :max-length="64"
          :input-attrs="{
            autocomplete: 'new-password',
          }"
        />
      </a-form-item>
    </a-form>
  </resource-dialog>
</template>

<style scoped lang="scss"></style>
